<template>
	<view class="register">
		<!-- <u-navbar @rightClick="touser" :autoBack="true" bgColor='#fff'>
		</u-navbar>
		<view class="title">
			注册
		</view> -->
		<navbar title="注册账号" :back="true"></navbar>
		<view class="form">
			<u--form labelPosition="left" :model="params" labelAlign='left' :rules="rules" ref="form" errorType="toast">
				<!-- <view style="display: flex;align-items: center;" class="mbox">
					<u-form-item prop="account" :borderBottom='false' class="item" label="账号" labelWidth="140rpx">
						<u--input class="input" v-model="params.account" border="none" placeholder="请输入账号"></u--input>
					</u-form-item>
				</view> -->
				<view class="mbox">
					<u-form-item label="手机号" labelWidth="140rpx" prop="account" :borderBottom='false' class="item">
						<u--input class="input" v-model="params.account" border="none" placeholder="请输入手机号"></u--input>
					</u-form-item>
				</view>
				<view class="mbox">
					<view style="display: flex;align-items: center;">
						<view style="width: 140rpx;">验证码</view>
						<u--input class="input" v-model="params.code" border="none" placeholder="请输入验证码"></u--input>
						<!-- <view class="">111</view> -->
						<view @tap="getCode(2)"
							style="font-size: 22rpx;;line-height: 64rpx;text-align: center;width:188rpx;height:64rpx;color:rgba(128, 128, 128, 1);fontWeight: 500;border: 1px solid rgba(128, 128, 128, 1);box-shadow:0px 2px 4px rgba(150, 150, 150, 0.11);border-radius:6px;margin:0">
							{{tips}}
						</view>
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					</view>
				</view>
				<!-- <view class="mbox">
					<u-form-item prop="action" :borderBottom='false' class="item" label="昵称" labelWidth="140rpx">
						<u--input class="input" v-model="params.action" border="none" placeholder="请输入昵称"></u--input>
					</u-form-item>
				</view> -->
				<view class="mbox">
					<u-form-item prop="pwd" :borderBottom='false' class="item" label="密码" labelWidth="140rpx">
						<u--input class="input" v-model="params.pwd" border="none" placeholder="请输入密码"></u--input>
					</u-form-item>
				</view>

				<!-- 	<view class="mbox">
					<u-form-item prop="spreadUid" :borderBottom='false' class="item" label="邀请码" labelWidth="140rpx">
						<u--input class="input" v-model="params.spreadUid" border="none" placeholder="请输入邀请码"></u--input>
					</u-form-item>
				</view> -->

				<view class="u-flex u-row-center ">
					<view class="btn" @click="register">
						确定注册
					</view>

				</view>

			</u--form>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/baseNavbar.vue'
	import {
		sendCode,
		register
	} from "@/api/common.js"
	import $store from "../../store";
	var _self;
	export default {
		components: {
			navbar
		},
		data() {
			return {
				seconds: 60,
				tips: "",
				flag: true,
				Style: {


				},
				params: {
					action: '',
					account: '',
					code: '',
					spreadUid: '',
					type: ''

				},
				rules: {
					'account': [{
							type: 'number',
							required: true,
							message: "请输入手机号码",
							trigger: ['blur', 'change']
						},
						{
							required: true,
							pattern: /^1[3456789]\d{9}$/,
							message: "手机号码格式不正确",
							trigger: ['blur', 'change']
						}
					],
					'code': {
						required: true,
						message: "请输入验证码",
						trigger: ['blur', 'change']
					},
					'pwd': {
						required: true,
						message: "请输入密码",
						trigger: ['blur', 'change']
					},

				},
			};
		},
		onLoad(option) {
			_self = this
		},
		onShow() {
			this.getWxCode()
		},
		computed: {

		},
		methods: {
			getWxCode() {
				uni.login({
					provider: 'weixin',
					success: function(code_res) {
						if (code_res.errMsg == "login:ok") {
							let code = code_res.code;
							_self.params.wxCode = code;
						}
					}
				});
			},
			register() {
				let that = this
				this.$refs.form.validate().then(res => {
					console.log(11);
					register(that.params).then(res => {
						that.params.code = ''
						uni.showToast({
							title: "注册成功",
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/login/h5Login"
							})
						}, 1000)
					})
				}).catch(errors => {
					this.getWxCode()
				})
			},
			end() {
				this.flag = true
			},
			start() {
				this.flag = false
			},
			codeChange(text) {
				this.tips = text;
			},

			getCode(value) {
				console.log('zuc111');
				if (!this.flag) return
				if (!this.$u.test.mobile(this.params.account)) {
					return this.$u.toast('请输入正确的手机号');
				}
				console.log('zuc22');
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				console.log('zuc333');
				sendCode({
					phone: this.params.account,
					value: 2
				}).then(res => {
					console.log('zuc444');
					uni.hideLoading();
					console.log('zzuc44', res);
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: res.message
					})
					uni.hideLoading();
				})
			},
		},
		onReady() {

		}
	};
</script>
<style lang="scss" scoped>
	/deep/.u-button--plain.data-v-3bf2dba7 {
		width: 200rpx;
	}




	.mbox {
		margin: 60rpx 0;
	}

	* {
		margin: 0;
		padding: 0;
	}

	.register {
		overflow: hidden;
	}

	.form {
		margin: 0 40rpx;

	}

	.header {
		height: 80rpx;
		margin-top: 26rpx;
		margin-left: 22rpx;
	}

	.title {
		margin: auto;
		margin-top: 80rpx;
		text-align: center;
		height: 4px;
		color: rgba(0, 0, 0, 1);
		font-size: 24px;
		font-weight: 500;
	}

	.input {
		text-indent: 18rpx;
	}

	// .verification{
	// 	left: 254px;
	// 	top: 227px;
	// 	width: 74px;
	// 	height: 27px;
	// 	border: 1px solid rgba(128, 128, 128, 1);
	// 	box-shadow: 0px 2px 4px rgba(150, 150, 150, 0.11);
	// 	border-radius: 6px;
	// }
	.item {
		padding: 0;
		height: 150rpx;
	}

	.button {
		width: 188rpx;
		height: 64rpx;
		color: rgba(128, 128, 128, 1);
		font-size: 10px;
		font-weight: 500;
		border: 1px solid rgba(128, 128, 128, 1);
		box-shadow: 0px 2px 4px rgba(150, 150, 150, 0.11);
		border-radius: 6px;
	}

	.agreement {
		margin-top: 24rpx;
		display: flex;
	}

	.agreement>view:nth-of-type(1) {
		margin-top: 18rpx;
	}

	.agreement>view:nth-of-type(2) {
		margin-left: 44rpx;
		font-size: 10px;
		color: rgba(166, 166, 166, 1);

		text {
			color: black;
		}
	}

	.registers {
		margin-top: 48rpx;
		height: 104rpx;
		background: rgba(255, 187, 18, 1);
		border-radius: 6px;
		border: rgba(255, 187, 18, 1);
		;
	}

	.else {
		text-align: center;
		margin-top: 238rpx;
	}

	.text {
		font-size: 28rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 1);
		width: 150rpx;
	}

	.btn {
		margin-top: 40rpx;
		width: 590rpx;
		line-height: 104rpx;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		background: #3277fc;
		border-radius: 8rpx;
	}
</style>